<html>
<head>
    <title>小星球的早安翻译机</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <script src="js/jquery.js"></script>
</head>
    <body lang=ZH-CN >
      
        <div class=WordSection1 >
  
            <p class=MsoNormal align=center style='text-align:center'><span style='font-size:18.0pt;font-family:幼圆'>用你的方式对郑繁星说早安<span
    lang=EN-US><o:p></o:p></span></span></p>
    <p class=MsoNormal align=center style='text-align:center'><span style='font-size:14.0pt;font-family:幼圆'>“早安”<span
        lang=EN-US><o:p></o:p></span></span></p>
        <p class=MsoNormal align=center style='text-align:center'><span style='font-size:14.0pt;font-family:幼圆'>如果用你的方式对郑繁星说的话，会是什么呢？<span
            lang=EN-US><o:p></o:p></span></span></p>
</div>
    <div style="display:none">
    <img id="starImg" style="height:100%; width:100%;" src="img/8.png" />
    </div>
    <div class=MsoNormal align=center style='text-align:center'>
        <p class=MsoNormal align=center style='text-align:center'><span style='font-size:12.0pt;font-family:幼圆'>请输入你的名字<span
            lang=EN-US><o:p></o:p></span></span></p>
            <input type="text" id="desc" onblur="hechen()" value="" />
            <button onclick="saveAsLocalImage()">开始翻译</button>
            <o:p></o:p></span></span></p>
        </div>
    <canvas id="main" height="730" width="420" style="border:1px solid #d3d3d3; margin:0 auto;display: block;"></canvas>
 
    <style type="text/css">
    @font-face {
        font-family:'AR';
        src: url(font/ARPShinChanPOP.ttf) format('truetype');
    }
    </style>
    
<script>
    $(function(){
        hechen();
    });

    function hechen(){
        var mydate = new Date();
        var date = mydate.getFullYear()+'-'+(mydate.getMonth()+1)+'-'+mydate.getDate();
        var mainCtx = getCanvasContext('main');
        var maxWidth = mainCtx.width;
        var maxHeight = mainCtx.height;
        mainCtx.clearRect(0,0,1000,1000);
        //因为没法直接读取本地图片 所以做了这部操作

        var starImg = new Image();
        var ran = Math.floor(Math.random()*6);//生成0和7之间的随机整数；由于会随机到0，所以建议图片命名从0开始
		starImg.src = "img/" + ran + ".png";
        //starImg.src=$('#starImg').attr('src');
        //随机早安文本
      


var a = Math.random() + "" //产生一个随机数

var rand1 = a.charAt(5) //的到这个数的第五个字符(实际还是从0~9的数字)

quotes = new Array //创建消息数组

quotes[1] = '我遇见了世界上的一切，却只喜欢你' //这里分配十句随机出现的文本

quotes[2] = '诗人喜欢远方和流浪，我偏爱你与人间烟火'

quotes[3] = '生活奇奇怪怪，你得可可爱爱'

quotes[4] = '可以麻烦你笑一下吗，我的咖啡忘记加糖了'

quotes[5] = '你温暖了每一天的阳光'

quotes[6] = '我每天早起，就是为了早点开始想你'

quotes[7] = '太阳每天都升起，我很高兴遇见你'

quotes[8] = '把你位置发给我，看看我的心跑哪去了'

quotes[9] = '早安，每一天都要和更好的自己碰面。'

quotes[0] = '早安，我会像日出日落一样陪着你'

var quote = quotes[rand1] //由随机数选择一句话

var morningop ='用'
var morninged ='的方式对郑繁星说早安'
var morningend='就是'
var up='“'
var down ='”'

var b = Math.random() + "" //产生一个随机数

var rand1 = b.charAt(5) //的到这个数的第五个字符(实际还是从0~9的数字)

bgcolors = new Array //创建消息数组

bgcolors[1] = '#ffe647' //这里分配10个颜色

bgcolors[2] = '#b8f1cc'

bgcolors[3] = '#b8f1ed'

bgcolors[4] = '#f1f1b8'

bgcolors[5] = '#d9b8f1'

bgcolors[6] = '#f1b8f1'

bgcolors[7] = '#ff9b6a'

bgcolors[8] = '#ff8444'

bgcolors[9] = '#FDE6E0'

bgcolors[0] = '#C7EDCC'

var bgcolor = bgcolors[rand1] //由随机数选择一句话






        starImg.onload=function(){
            var grd=mainCtx.createLinearGradient(0,0,0,730);
            grd.addColorStop(0,bgcolor);
            grd.addColorStop(1,"white");
            mainCtx.fillStyle=grd;
            mainCtx.fillRect(0,0,420,730);
            //先把图片绘制在这里
            mainCtx.drawImage(starImg,50,250,300,420)



            //读取用户的文本
            if($('#desc').val()){
                
                //名字
                mainCtx.font = "small-caps bold 28px STXinwei";
                //设置用户文本填充颜色
                mainCtx.fillStyle = "black";
                //从坐标点(50,50)开始绘制文字
                mainCtx.fillText($('#desc').val(),50,100);
                //....的方式对郑繁星说早安
                mainCtx.font = "small-caps bold 20px YouYuan";
                mainCtx.fillText(morninged,170,150);
                //就是
                mainCtx.font = "small-caps bold 20px STXinwei";
                mainCtx.fillText(morningend,100,180);
                //设置时间填充色
                mainCtx.font = "small-caps bold 20px AR";
                mainCtx.fillText(date,286,347);
                //设置早安填充颜色
                //mainCtx.textAlign='center';
                mainCtx.font = "small-caps bold 21px STXinwei";
                mainCtx.fillText(quote,10,230);
                //设置上引号
                mainCtx.font = "small-caps bold 32px STXinwei";
                mainCtx.fillText(up,0,200);
                //设置下引号
                mainCtx.font = "small-caps bold 32px STXinwei";
                mainCtx.fillText(down,380,280);
                //用
                mainCtx.font = "small-caps bold 24px YouYuan";
                mainCtx.fillText(morningop,20,80)

            }

        };

    }

    function getCanvasContext(id){
        return document.getElementById(id).getContext("2d");
        
    }

    function saveImageInfo() {
        var mycanvas = document.getElementById("main");
        var image = mycanvas.toDataURL("image/jpg");
        var w=window.open('about:blank','image from canvas');
        w.document.write("<img src='"+image+"' alt='from canvas'/>");
    }

    function saveAsLocalImage(){
        var myCanvas = document.getElementById("main");
        var image = myCanvas.toDataURL("image/jpg").replace("image/jpg", "image/octet-stream");
        window.location.href=image;
    }
    




</script>

</body>
</html>
